<!--  -->
<template>
  <div class="el-upload-file-list-container" :style="fileListStyle">
    <div class="file-item" v-for="(item, key) in data" :key="key" :style="fileListItemStyle">
      <SingleFile :list="data" :data="item" @delete-file="onDeleteFile(key)" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { StyleValue } from "vue";
import SingleFile from "./SingleFile.vue";

const props = defineProps<{
  data: string[],
  fileListStyle?: StyleValue,
  fileListItemStyle?: StyleValue
}>()
const emits = defineEmits(['delete-file'])

/**
 * 去删除
 */
const onDeleteFile = (key: number) => {
  emits('delete-file', key)
}

</script>
<style scoped lang="scss">
  .el-upload-file-list-container {
    margin-top: 15px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    .file-item {
      width: 145px;
      height: 120px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
</style>